<template>
  <el-container style="height: 100%;">
    <el-header style="height: 8%">
      <div class="header-box">
        <div class="header-title">
          <img src="../assets/logo.png">
          <span>轻淘易购后台管理系统</span>
        </div>
        <div class="header-time">
          <span>{{ nowTime }}</span>
        </div>
        <div class="header-main">
          <el-dropdown placement="top" @command="changeDropDownMenu">
            <img :src="headImage">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="0">个人中心</el-dropdown-item>
              <el-dropdown-item divided command="1">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{ nickName }}</span>
        </div>
      </div>
    </el-header>
    <div style="height: 2px;background-color: #1482f0;width: 100%;"></div>
    <el-container style="height: 90%">
      <el-aside width="170px" style="background-color:#2b4b6b;">
        <menu-aside></menu-aside>
      </el-aside>
      <el-main style="background-color: #F9FBFF;">
        <div>
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import MenuAside from '@/components/MenuAside.vue'
import { getUserInfo } from '@/api/home/homeApi'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
  // eslint-disable-next-line vue/no-unused-components
  components: { MenuAside },
  data () {
    return {
      nowTime: '',
      accountName: window.localStorage.getItem('account') ? window.localStorage.getItem('account') : '轻淘用户',
      nickName: null,
      headImage: null
    }
  },
  created () {
    this.nowTime = this.timeNumber()
    this.getNowTime()
    this.getUserInfoData()
  },
  methods: {
    /* *
    * 实时跟新当前时间
    *  */
    getNowTime () {
      const speed = 1000
      const that = this
      const theNowTime = function () {
        that.nowTime = that.timeNumber()
      }
      setInterval(theNowTime, speed)
    },
    /* *
    * 设置时间格式
    *  */
    timeNumber () {
      const today = new Date()
      const date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
      const time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
      return date + '  ' + time
    },
    twoDigits (val) {
      if (val < 10) return '0' + val
      return val
    },
    changeDropDownMenu (e) {
      switch (e) {
        case '0':
          // 跳转到个人主页
          this.$router.push('/mine')
          break
        case '1':
          // 清除token和用户信息
          window.sessionStorage.removeItem('token')
          window.sessionStorage.removeItem('userId')
          // 路由到登录页
          this.$router.push('/login')
          break
      }
      console.log(e)
    },
    /* *
    * 获取用户信息
    *  */
    getUserInfoData () {
      const userId = window.sessionStorage.getItem('userId')
      getUserInfo(userId).then(res => {
        this.nickName = res.data.nickName
        this.headImage = res.data.headImage
      })
    }
  }
}
</script>

<style lang="less" scoped>

.el-aside::-webkit-scrollbar {
  width: 0; /* 设置滚动条宽度 */
}

.el-header {
  background-color: #2b4b6b;
  color: white;
}

.header-box {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .header-title {
    display: flex;
    align-items: center;

    img {
      height: 40px;
      width: 40px;
      margin-left: -10px;
    }
  }

  .header-time {
    color: #ffffff;
    font-size: 23px;
    font-family: 微软雅黑, serif;
    font-weight: bold;
  }

  .header-main {
    display: flex;
    align-items: center;
    font-size: 15px;

    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 4px;
      cursor: pointer;
      margin-top: 5px;
    }
  }

}
</style>
